<template>
  <div class="order">
    <div class="order-input">
      <div>
        <span>订单号</span>
        <el-input v-model="ordernum" placeholder="订单号"></el-input>
      </div>
      <div>
        <span>收货人</span>
        <el-input v-model="ordername" placeholder="收货人"></el-input>
      </div>
      <div>
        <span>手机号</span>
        <el-input v-model="orderphone" placeholder="手机号"></el-input>
      </div>
      <div>
        <span>订单状态</span
        ><el-select v-model="orderselect" placeholder="订单状态">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="order-chosetime">
      <div class="block order-time">
        <span class="demonstration">选择时间</span>
        <el-date-picker
          style="margin: 0 20px"
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button type="primary" :disabled="dis" @click="check"
          >查询</el-button
        >
      </div>
    </div>
    <div class="order-table">
      <el-table
        :data="tableData"
        border
        style="
          width: 1240px;
          border-radius: 4px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        "
      >
        <el-table-column fixed prop="orderNo" label="订单号" width="150">
        </el-table-column>
        <el-table-column prop="deliveryTime" label="下单时间" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="consignee" label="收货人" width="120">
        </el-table-column>
        <el-table-column prop="deliverAddress" label="配送地址" width="300">
        </el-table-column>
        <el-table-column prop="orderTime" label="送达时间" width="120">
        </el-table-column>
        <el-table-column prop="remarks" label="用户备注" width="120">
        </el-table-column>
        <el-table-column prop="orderAmount" label="订单金额" width="120">
        </el-table-column>
        <el-table-column prop="orderState" label="订单状态" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-popover placement="right" trigger="click">
              <el-table :data="gridData" style="width: 1100px">
                <el-table-column
                  width="150"
                  property="consignee"
                  label="姓名"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="deliverAddress"
                  label="地址"
                ></el-table-column>
                <el-table-column
                  width="300"
                  property="deliveryTime"
                  label="下单时间"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="orderAmount"
                  label="价格"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="orderNo"
                  label="订单号"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="orderState"
                  label="订单状态"
                ></el-table-column>
                <el-table-column
                  width="300"
                  property="orderTime"
                  label="送达时间"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="phone"
                  label="手机"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="remarks"
                  label="备注"
                ></el-table-column>
              </el-table>
              <el-button
                style="margin-right: 10px"
                slot="reference"
                type="text"
                size="small"
                :disabled="disnow"
                @click="clicknow(scope.row)"
                >查看</el-button
              >
            </el-popover>
            <el-button
              :disabled="shownow"
              type="text"
              size="small"
              @click="clickchange(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="nowpage"
        :page-size="showpage"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="修改订单" :visible.sync="changeorder" class="titleorder">
      <div>
        <span>订单号</span>
        <el-input disabled v-model="changeorderno"></el-input>
      </div>
      <div>
        <span>下单时间</span>
        <el-input disabled v-model="changeordertime"></el-input>
      </div>
      <div>
        <span>电话</span>
        <el-input v-model="changeorderphone"></el-input>
      </div>
      <div>
        <span>收货人</span>
        <el-input v-model="changeorderman"></el-input>
      </div>
      <div>
        <span>送货地址</span>
        <el-input v-model="changeorderaddress"></el-input>
      </div>
      <div>
        <span>送达时间</span>
        <el-input disabled v-model="changearrive"></el-input>
      </div>
      <div>
        <span>备注</span>
        <el-input v-model="changeorderremarks"></el-input>
      </div>
      <div>
        <span>订单金额</span>
        <el-input v-model="changeordermoney"></el-input>
      </div>
      <div>
        <span>订单状态</span>
        <el-input disabled v-model="changeorderstate"></el-input>
      </div>
      <el-button @click="changeorder = false">取 消</el-button>
      <el-button type="primary" @click="changesure">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getorder, detail, orderedit } from "@/apis/items";
// 引入转换时间utils
import { YMDHMS } from "@/utils/utils";
export default {
  data() {
    return {
      dis: false,
      disnow: false,
      shownow: false,
      // 当前在第几页
      nowpage: 1,
      // 当前页面显示多少条
      showpage: 5,
      // 分页条数
      total: 0,
      // 订单号
      changeorderno: "",
      // 下单时间
      changeordertime: "",
      // 电话
      changeorderphone: "",
      // 收货人
      changeorderman: "",
      // 送货地址
      changeorderaddress: "",
      // 送达时间
      changearrive: "",
      // 备注
      changeorderremarks: "",
      // 订单金额
      changeordermoney: "",
      // 订单状态
      changeorderstate: "",
      changeorder: false,
      // 查询订单号
      ordernum: "",
      // 查询收货人
      ordername: "",
      // orderadress: "",
      // ordertime: "",
      // ordermoney: "",
      // orderstate: "",
      // orderarrivetime: "",
      // 查询订单电话
      orderphone: "",
      // orderremarks: "",
      orderselect: "已受理",
      value1: [
        new Date(new Date() - 1000 * 60 * 60 * 24 * 365 * 5),
        new Date(),
      ],
      select: "",
      options: ["已受理", "已完成", "派送中"],
      tableData: [],
      gridData: [],
      // 查询设置一个标杆
      checkbox: false,
    };
  },
  // 页面加载完毕后发送ajax请求
  created() {
    this.fungetorder();
  },
  methods: {
    // 当前移动到哪个界面
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // 先赋值给动态数据
      // console.log(val);
      this.nowpage = val;
      // 再调用函数,这时函数的参数等于赋值后的动态数据,所以会转换
      // this.fungetorder();
      // 查询按钮的时候
      // this.funget();
      // 判定,如果点了查询,值改变,就选择查询按钮,不然就选择普通调用按钮
      if (this.checkbox == true) {
        // 就调用查询按钮
        this.funget();
        return;
      } else {
        //否者就调用普通渲染页面
        this.fungetorder();
      }
    },
    // 封装函数发送ajax请求,并渲染页面
    fungetorder() {
      getorder({
        currentPage: this.nowpage,
        pageSize: this.showpage,
      }).then((res) => {
        // console.log(res.data.data);
        // 总条数
        this.total = res.data.total;
        // 将数据赋给上面的值
        this.tableData = res.data.data;
        // console.log(this.tableData);
        // 遍历获得每个数组的数据
        for (const now of this.tableData) {
          // 下单时间
          now.deliveryTime = YMDHMS(now.deliveryTime);
          // 送达时间
          now.orderTime = YMDHMS(now.orderTime);
        }
      });
      //  再将这个标杆值变为false
      this.checkbox = false;
    },
    // 封装函数发送ajax,查询请求
    // 点击查询发送ajax查询参数
    // 封装函数发送查询ajax
    funget() {
      getorder({
        currentPage: this.nowpage,
        pageSize: this.showpage,
        orderNo: this.ordernum,
        consignee: this.ordername,
        phone: this.orderphone,
        orderState: this.orderselect,
        date: [JSON.stringify(this.value1)],
      }).then((res) => {
        // console.log(res);
        // 循环获得的数组
        for (const changedata of res.data.data) {
          // 将点单时间转换后赋给当前的值
          changedata.deliveryTime = YMDHMS(changedata.deliveryTime);
          // 将送达时间转换后赋给当前的值
          changedata.orderTime = YMDHMS(changedata.orderTime);
        }
        // 总条数
        this.total = res.data.total;
        // 将数据赋给上面的值
        this.tableData = res.data.data;
        // this.fungetorder();
      });
    },
    // 点击查询,发送ajax
    check() {
      this.dis = true;
      setTimeout(() => {
        this.dis = false;
      }, 1000);
      // this.date1 = this.value1[0];
      // this.date2 = this.value1[1];
      // 查看封装的查询按钮ajax
      this.funget();
      // 点了查询将标杆设为true
      this.checkbox = true;
    },
    // 查看数据单条
    clicknow(i) {
      this.disnow = true;
      setTimeout(() => {
        this.disnow = false;
      }, 1000);
      // console.log(i);
      // 每次点击前都清空数组,不然会显示多条
      this.gridData = [];
      detail({
        id: i.id,
      }).then((res) => {
        // console.log(res);
        // 转换下单时间
        res.data.data.deliveryTime = YMDHMS(res.data.data.deliveryTime);
        // 转换送达时间
        res.data.data.orderTime = YMDHMS(res.data.data.orderTime);
        // 获得的响应值是一个对象,所以用push推进数组
        this.gridData.push(res.data.data);
      });
    },
    // 编辑页面
    clickchange(i) {
      // console.log(i);
      this.changeorder = true;
      // 将数据回显到弹出框
      this.changeorderno = i.orderNo;
      this.changeordertime = i.orderTime;
      this.changeorderphone = i.phone;
      this.changeorderman = i.consignee;
      this.changeorderaddress = i.deliverAddress;
      this.changearrive = i.deliveryTime;
      this.changeorderremarks = i.remarks;
      this.changeordermoney = i.orderAmount;
      this.changeorderstate = i.orderState;
      // 将id挂载到this之神
      this.changeid = i.id;
    },
    changesure() {
      this.changeorder = false;
      this.shownow = true;
      setTimeout(() => {
        this.shownow = false;
      }, 1000);
      // 发送ajax编辑数据;
      orderedit({
        id: this.changeid,
        orderNo: this.changeorderno,
        orderTime: this.changeordertime,
        phone: this.changeorderphone,
        consignee: this.changeorderman,
        deliverAddress: this.changeorderaddress,
        deliveryTime: this.changearrive,
        remarks: this.changeorderremarks,
        orderAmount: this.changeordermoney,
        orderState: this.changeorderstate,
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          this.fungetorder();
          this.$message({
            message: "恭喜你，修改订单成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  margin: 20px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .order-input {
    display: flex;
    div {
      display: flex;
      line-height: 40px;
      span {
        width: 100px;
        text-align: center;
      }
    }
  }
  .order-chosetime {
    margin-top: 20px;
    .order-time {
      margin-left: 13px;
      width: 100px;
      text-align: center;
      display: flex;
      width: 600px;
      align-items: center;
    }
  }
  .order-table {
    margin-top: 50px;
  }
  .block {
    margin-top: 20px;
  }
  .titleorder {
    .el-input {
      margin: 5px 0;
    }
  }
}
</style>